<template>
    <div class="content">
        <el-image :src="dog1" class="img" fit="cover"></el-image>
        <el-image :src="test1" class="img" fit="cover"></el-image><br/>
        <el-image :src="test2" class="img" fit="cover"></el-image>
        <el-image :src="test3" class="img" fit="cover"></el-image>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    const dog1 = new URL('../assets/images/dog1.jpg', import.meta.url).href
    const test1 = new URL('../assets/images/test1.jpg', import.meta.url).href
    const test2 = new URL('../assets/images/test2.jpg', import.meta.url).href
    const test3 = new URL('../assets/images/test3.jpg', import.meta.url).href
</script>

<style scoped>
.content {
    margin: 100px 0 0 100px;

    filter: grayscale(.95) contrast(.95);
}
.img{
    width: 300px;
    height: 230px;
    margin: 10px;
}
</style>